<template>
    <div class="mr-content">
        <pheade>
            <span class="s"> {{$route.params.id}}</span>
        </pheade>
        <div class="content"  v-for="ge in beu">
            <router-link :to="'/image/Mitodetails/'+ge.id+'/'+ge.label">
            <div class="fuimg">
                    <img :src=ge.images class="img3" alt="">
                   
             </div>
             <div class="nei">
                  <p>动漫图片{{ge.label}}漫画壁纸美图下载</p>
                        <img :src=ge.userIDInfo.images id="san" alt="">
                        <span id="si">{{ge.userIDInfo.name}}</span>
               </div>
               </router-link>
            </div>
             <p id="jiazai" @click="loadmore">点击加载更多</p>
        <loding v-if="showload"></loding>
        <div class="kong"></div>
        <pfooter></pfooter>
         
    </div>

</template>
<script>
    import Pheade from '../components/Head'
    import Loding from '../components/Loding'
    import Pfooter from '../components/Footer'
    export default {
        components: {
            Pheade, Loding, Pfooter
        },
        data() {
            return {
                showload: true,
                count:1,
                beu:[]
            }
        },
        created() {
          this.getmore(this.count)
        },
        methods:{
             getmore(page){
               this.axios.get(`https://api.maimengjun.com/index.php?r=prettyImages/list&page=${page}&size=25&searchLabel=${this.$route.params.id}`)
               .then(data=>{
                   this.beu=this.beu.concat(data.data.results)
                   setTimeout(() => {
                        this.showload = false
                    }, 2000)
               })
               .catch(err=>{
               })
           },
             loadmore(){
                      this.count++
                  
                this.getmore(this.count)
               } 
        }   
    }
</script>
<style scoped>
.mr-content{
    margin-top: 1.4rem;
}
   #si {
        display: inline-block;
        position: relative;
        top: -0.1rem;
        left: 0.4rem;
   }
    #san {
        height: 0.5rem;
        width: 0.5rem;
        border-radius: 50%;
    }
    
    img.img3 {
        width: 4rem;
        height: 4rem;
        margin-left: 0.47rem;
    }

 .kong{
       height: 60px;
       width: 100%;
       }
       .content{
           display: inline-block;
           width: 5rem;
           color: gray;
       }
       .nei{
           width: 4rem;
           margin-left: 0.48rem;
       }
       .nei>p{
           font-weight: bolder;
       }
 #jiazai{
      line-height: 0.7rem;
       width: 3rem;
       background: pink;
       color: white;
       text-align: center;
       margin:0.3rem auto;
       border-radius: 7px;
   }
    .s {
        display: inline-block;
        position: relative;
        left: 3rem;
        top: 0.2rem;
        font-size: 0.4rem;
        color: #ff4f65;
        font-weight: bolder;
    }
</style>